<template>
  <view>
    <!-- 选项卡 -->
    <view class="d-flex bg-white a-center font-md text-muted border-top border-bottom border-light-secondary">
      <view
        class="flex-1 d-flex a-center j-center py-2"
        v-for="(item, index) in tabBars"
        :key="index"
        :class="tabIndex === index ? 'tabactive' : ''"
        @tap="changeTab(index)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 订单列表 -->
    <block v-for="(tab, tabI) in tabBars" :key="tabI">
      <view class="position-relative" v-show="tabI === tabIndex" style="min-height: 440rpx;">
        <template v-if="tab.list.length > 0">
          <!-- 订单列表 -->
          <block v-for="(item, index) in tab.list" :key="index">
            <order-list :item="item" :index="index" @update="getOrderList"></order-list>
          </block>
        </template>
        <!-- 默认无 -->
        <template v-else>
          <no-thing :icon="tab.no_thing" :msg="tab.msg"></no-thing>
        </template>
      </view>
    </block>

    <view class="text-center main-text-color font-md font-weight mt-5">为你推荐</view>
    <view class="position-relative d-flex a-center j-center text-secondary mb-3 pt-3">
      <view style="background: #f5f5f5; z-index: 2" class="px-2 position-absolute">买的人还买了</view>
      <view class="position-absolute" style="height: 1upx; left: 0; right: 0; background-color: #ddd"></view>
    </view>

    <!-- 为你推荐 -->
    <view class="row j-sb bg-white">
      <common-list v-for="(item, index) in hotList" :key="index" :item="item" :index="index"></common-list>
    </view>
  </view>
</template>

<script>
import commonList from "@/components/common/common-list.vue";
import noThing from "@/components/common/no-thing.vue";
import orderList from "@/components/order/order-list.vue"; // 导入 order-list 组件

export default {
  components: {
    noThing,
    commonList,
    orderList, // 注册 order-list 组件
  },
 data() {
   return {
     tabIndex: 0, // 默认选中第一个选项卡
     tabBars: [
       {
         name: "全部",
         no_thing: "no_pay",
         msg: "你还没有订单",
         key: "all",
         list: [
           {
             id: 1,
             orderNumber: "202310120001",
             status: "已完成",
             create_time:"2019-09-10 10:20",
             order_items: [
               {
                 title: "商品A",
                 num: 5,
                 pprice: 99.99,
				 attrs:"金色",
                 cover: "/static/images/product2.jpg"
               },
             ],
			 
			 total_num:3,
			 total_price:199.00
           },
		   {
		     id: 1,
		     orderNumber: "202310120001",
		     status: "已完成",
		     create_time:"2019-09-10 10:20",
		     order_items: [
		       {
		         title: "商品A",
		         num: 5,
		         pprice: 99.99,
		   				 attrs:"金色",
		         cover: "/static/images/product2.jpg"
		       },
		     ],
		   			 total_num:3,
		   			 total_price:199.00
		   },
		   
     ],
	},
       {
         name: "待支付",
         no_thing: "no_pay",
         msg: "你还没有待付款订单",
         key: "paying",
         list: [
			 {
			   id: 1,
			   orderNumber: "202310120001",
			   status: "待支付",
			   create_time:"2019-09-10 10:20",
			   order_items: [
			     {
			       title: "商品A",
			       num: 5,
			       pprice: 99.99,
			 				 attrs:"金色",
			       cover: "/static/images/product2.jpg"
			     },
			   ],
			 			 
			 			 total_num:3,
			 			 total_price:199.00
			 },
		 ],
       },
       {
         name: "待收货",
         no_thing: "no_receiving",
         msg: "你还没有待收货订单",
         key: "receiving",
         list: [],
       },
       {
         name: "待评价",
         no_thing: "no_comment",
         msg: "你还没有待评价订单",
         key: "reviewing",
         list: [],
       },
     ],
     hotList: [
       {
         cover: "/static/images/xuanchuang1.jpg",
         title: "商品D",
         desc: "热销商品",
         oprice: 456,
         pprice: 888,
       },
       {
         cover: "/static/images/product2.jpg",
         title: "商品E",
         desc: "折扣商品",
         oprice: 1467,
         pprice: 4134,
       },
       {
         cover: "/static/images/xuanchuang1.jpg",
         title: "商品F",
         desc: "推荐商品",
         oprice: 456,
         pprice: 888,
       },
       {
         cover: "/static/images/xuanchuang1.jpg",
         title: "商品G",
         desc: "特价商品",
         oprice: 456,
         pprice: 888,
       },
     ],
   };
 },

 methods: {
   changeTab(index) {
     // 更新当前选中的选项卡索引
     this.tabIndex = index;

     // 根据选项卡的 key 或其他标识符跳转到相应页面
     const tab = this.tabBars[index];
     if (tab.key === "all") {
       uni.navigateTo({
         url: "/pages/order/all", // 跳转到全部订单页面
       });
     } else if (tab.key === "paying") {
       uni.navigateTo({
         url: "/pages/order/paying", // 跳转到待付款页面
       });
     } else if (tab.key === "receiving") {
       uni.navigateTo({
         url: "/pages/order/receiving", // 跳转到待收货页面
       });
     } else if (tab.key === "reviewing") {
       uni.navigateTo({
         url: "/pages/order/reviewing", // 跳转到待评价页面
       });
     }
   },
   getOrderList() {
     // 这里实现获取订单列表的逻辑
   },
 },
};
</script>

<style>
.tabactive {
  border-bottom: 5rpx solid #fd6801;
  color: #fd6801;
  margin-bottom: -5rpx;
}
</style>
